<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head >
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title >图书借阅系统前台</title>
    <link rel="icon" href="../static/favicon.ico" th:href="@{/favicon.ico}" type="image/x-icon">
    <!--导入网页图标 -->
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{/favicon.ico}" type="image/x-icon">
    <!--导入网页图标 -->
    <script src="../static/lib/jQuery/jquery-3.5.1.min.js" th:src="@{/lib/jQuery/jquery-3.5.1.min.js}"></script>
    <!--导入jQuery库 -->
    <script src="../static/lib/layui/layui.js" th:src="@{/lib/layui/layui.js}"></script>
    <!--导入layUI库 -->
    <script src="../static/lib/cookie/js.cookie-2.2.1.min.js" th:src="@{/lib/cookie/js.cookie-2.2.1.min.js}"></script>
    <!--导入cookie库 -->
    <link rel="stylesheet" href="../static/lib/layui/css/layui.css" th:href="@{/lib/layui/css/layui.css}" media="all">
    <!--导入layUI css库 -->
    <link rel="stylesheet" href="../static/css/common.css" th:href="@{/css/common.css}">
    <!--导入公共的css，其中可定义整个网页的配色方案 -->
    <link rel="stylesheet" href="../static/css/index.css" th:href="@{/css/index.css}">
</head>

<body>
    <div>
        <ul class="layui-nav" lay-filter="" style="position: fixed;top:0;left: 0;right: 0;z-index: 1000;">
            <li class="layui-nav-item"><a href="" id="hover_div" style="font-size:large">&nbsp;图书借阅系统</a></li>

            <form class="layui-input-inline  layui-layout-right" style="margin-right: 550px;margin-top:15px">
                <input id="search_input" placeholder="书名、作者等关键词" class="layui-input-inline">
                <button id="search_input_btn" type="submit" class="layui-input-inline">
                    <i class="layui-icon layui-icon-search" style="font-size: 25px; color: #1E9FFF;"></i>
                </button>
            </form>

            <li class="layui-nav-item layui-layout-right" style="margin-right: 100px;">
                <a href="javascript:;">
                    <img src="../../static/images/ashini.ico"
                        th:src="${session.user==null?'/images/default.jpg':session.user.picture}" class="layui-nav-img">
                    <span th:text="${session.user==null?'未登录':session.user.username}">啊、是你</span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="" th:href="@{/borrow}">借书管理</a></dd>
                    <dd><a href="" th:href="@{/userInfo}">个人中心</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item layui-layout-right"><a href="/loginOut">安全退出</a></li>
        </ul>
    </div>

    <div style="margin-top:60px;margin-left:200px;margin-right:200px;margin-bottom:60px;height:1500px;">

        <form class="layui-form layui-form-pane" style="margin-top: 10px;" action="" th:object="${session.user}"
              th:action="@{/changeUserInfo}">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input name="userId" th:value="*{userId}" type="hidden" autocomplete="off" class="layui-input"
                           style="width: 1000px">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" readonly th:value="*{username}" lay-verify="required"
                           lay-reqtext="用户名不能为空" placeholder="请输入" autocomplete="off" class="layui-input"
                           style="width: 1000px">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" value="" lay-verify="required"
                           lay-reqtext="密码不能为空" placeholder="请输入" autocomplete="off" class="layui-input"
                           style="width: 1000px">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">联系方式</label>
                <div class="layui-input-block" style="width: 1000px">
                    <input type="tel" name="phone" th:value="*{phone}" lay-verify="required|phone" autocomplete="off"
                           placeholder="请输入"  class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">通信地址</label>
                <div class="layui-input-block" style="width: 1000px">
                    <input type="text" name="address" th:value="*{address}" lay-verify="required"
                           lay-reqtext="通信地址不能为空" placeholder="请输入" autocomplete="off" class="layui-input"
                           style="width: 1000px">
                </div>
            </div>

            <div class="layui-upload-list">
                <img class="layui-upload-img book_picture" id="pic" style="width: 180px;height: 180px">
                <p id="demoText"></p>
                <input type="hidden" name="picture" id="pic_v" th:value="*{picture}">
            </div>

            <div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-normal" id="test1" style="width: 180px">上传头像
                </button>
                <button type="reset" class="layui-btn layui-btn-primary" style="margin-left: 20px;margin-right: 9px">重置</button>

                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">保存</button>
            </div>

        </form>



    </div>


    <div th:fragment="admin-footer" class="lms-footer">

        ©2020 版权归武汉理工大学计算机1702"我都行，你们商量吧"小组所有&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span style="color:rgb(144, 145, 146)">
            技术支持：https://www.layui.com/
        </span>
    </div>

    <!-- layUI执行脚本 -->
    <script>
        layui.use(['element', 'form', 'upload'], function () {
            var form = layui.form;
            var element = layui.element;
            var $ = layui.jquery,upload = layui.upload;

            var picture = $("#pic_v").val();
            if(picture!=null&&picture!==""){
                $("#pic").attr("src",picture)
            }else{
                $("#pic").attr("src","/images/default.png")
            }

            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1'
                ,url: 'http://121.40.126.170/upload/' //改成您自己的上传接口
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                }
                ,done: function(res){
                    //如果上传失败
                    if(res.code > 0){
                        return layer.msg('上传失败');
                    }else{
                        //上传成功
                        // layer.alert('上传成功，url是'+res.pictureURL);
                        $("#pic_v").val(res.pictureURL);
                        $("#pic").attr("src",res.pictureURL);
                    }
                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
            });

        });
    </script>

</body>

</html>